<template>
  <div>
    <el-dialog
      v-model="editpopUp"
      width="43%"
      top="5%"
      :close-on-click-modal="false"
      @close="handleclose"
      title="电量补扣"
    >
      <el-form>
        <el-form-item label="房间号：">
          <span>{{ electricq_fill.roomNum }}</span>
        </el-form-item>
        <el-form-item label="剩余电量：">
          <span>{{ electricq_fill.eresidual }}度</span>
        </el-form-item>
        <el-form-item label=" " required>
          <el-select
            placeholder="请选择"
            v-model="add_form.isAdd"
            style="width: 100px"
          >
            <el-option
              v-for="item in selectType"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            placeholder="请输入变更的电量"
            style="width: 300px"
            class="form-item"
            v-model="add_form.electricityAmount"
            type="number"
            @blur="handleblur"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" required class="form-item1">
          <el-input
            type="textarea"
            placeholder="请说明变量电量的理由"
            style="width: 300px"
            class="form-item"
            v-model="add_form.description"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleclose">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { dictionaries } from "../assets/js/dictionaries";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    const editpopUp = ref(context.attrs.editpopUp);
    const electricq_fill = ref(context.attrs.electricq_fill);
    const add_form = reactive({
      regionId: electricq_fill.value.regionId,
      isAdd: null,
      electricityAmount: null,
      description: "",
    });

    const handleclose = () => {
      editpopUp.value = false;
      context.emit("handleclose", editpopUp.value);
    };
    const handleSave = () => {
      if (add_form.isAdd == null) {
        ElMessage.error("请选择变更方式");
        return;
      } else if (!add_form.electricityAmount) {
        ElMessage.error("请输入变更的电量");
        return;
      } else if (!add_form.description) {
        ElMessage.error("请输入变更备注");
        return;
      }
      // editpopUp.value = false;
      context.emit("handleSave", add_form, editpopUp.value);
    };
    const handleblur = () => {
      if (add_form.electricityAmount <= 0) {
        add_form.electricityAmount = null;
        ElMessage.error("变更电量大于0");
        return;
      }
    };
    return {
      add_form,
      editpopUp,
      electricq_fill,
      selectType: [
        {
          value: 1,
          name: "补充",
        },
        {
          value: 0,
          name: "扣除",
        },
      ],
      handleSave,
      handleclose,
      handleblur,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
.el-input {
  width: 215px;
}
&:deep(.el-dialog) {
  background: #fff;
}
// &:deep(.el-form-item) {
//   margin-bottom: 0;
// }
.form-item {
  margin-left: 30px;
}
.form-item1 {
  margin-left: 50px;
}
</style>
